<template>
  <div class="personal">
    <PageContainer headerType="icon">
      <div class="h1">欢迎</div>
      <div class="h2">尊敬的{{ user.nickName }}，您好</div>
      <div style="margin: 0 16px;">
        <Member type="detail"></Member>
      </div>
      <div class="label-container">
        <label>我的应用</label>
        <div class="container">
          <div class="app-item" v-for="(item, index) in list" :key="index" @click="goTo(item)">
            <img class="app-icon" :src="item.icon" />
            <div class="app-name">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <RecommendList></RecommendList>
    </PageContainer>
    <TabBar></TabBar>
    <u-toast ref="uToast"></u-toast>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TabBar from '@/components/TabBar/index.vue'
import PageContainer from '@/components/PageContainer/index.vue'
import Member from '@/components/Member/index.vue'
import ProductCard from '@/components/ProductCard/index.vue'
import RecommendList from '@/components/RecommendList/index.vue'
import {useRouter} from '@/hooks/useRouter';
import { getStorageUserInfo } from '@/hooks/useLogin'

const user = getStorageUserInfo()

const router = useRouter();

const list = ref([
  {
    title: '我的订单',
    icon: 'https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/1.png',
    path: '/pages/myOrder/index',
  },
  {
    title: '我的预约',
    icon: 'https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/2.png',
    path: '/pages/myReserve/index',
  },
  {
    title: '卡券中心',
    icon: 'https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/3.png',
    path: '/pages/coupon/index'
  },
  {
    title: '邀请有礼',
    icon: 'https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/4.png'
  },
  {
    title: '个人信息',
    icon: 'https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/5.png',
    path: '/pages/personalInfo/index'
  },
])

const uToast = ref()
const goTo = (item) => {
  if (!item.path) {
    uToast.value.show({
      message: '应用待开发'
    })
  }

  router.push({
    path: item.path,
  });
}
</script>

<style lang="less" scoped>
  .personal {
    .h1 {
      font-size: 28px;
      font-weight: 500;
      color: #282828;
      line-height: 36px;
      padding: 16px;
    }
    .h2 {
      font-size: 22px;
      font-weight: 400;
      color: #282828;
      line-height: 24px;
      padding: 0 16px 16px 16px;
    }

    .label-container {
      margin-top: 24px;
      padding: 0 16px;
      > label {
        color: #282828;
        font-size: 16px;
        margin-bottom: 16px;
        display: inline-block;
      }

      .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .app-item {
          font-size: 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          .app-icon {
            width: 32px;
            height: 32px;
          }
          .app-name {
            margin-top: 8px;
          }
        }
      }
    }
  }
</style>
